<!--
 * @Author: hupaocai 13767071930@163.com
 * @Date: 2025-03-27 02:21:46
 * @LastEditors: hupaocai 13767071930@163.com
 * @LastEditTime: 2025-03-29 11:51:10
 * @FilePath: /banban/pages/setting/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="page-setting" :style="`padding-top: ${statusBarHeight}px`">
        <view class="top-header">
            <view class="cancel" @tap="goBack">返回</view>
            <view class="title">绑定设备</view>
            <view style="opacity: 0">返回</view>
        </view>

        <view class="set-list">
            <view class="set-list-li" @tap="toggleBindNFC">
                <view>
                    <view class="title">NFC设备</view>
                    <view class="subtitle">{{ userInfo.nfcId }}</view>
                </view>
                <view>
                    <view class="bind-handle"><text v-if="userInfo.nfcId" class="unbind">解绑</text><text v-else class="bind">绑定</text><uni-icons type="right" color="#a6a6a6" size="18px" /></view>
                </view>
            </view>
            <view class="set-list-li" @tap="toggleBindPhone">
                <view>
                    <view class="title">手机</view>
                    <view class="subtitle">{{ userInfo.phone }}</view>
                </view>
                <view>
                    <view class="bind-handle"><text v-if="userInfo.phone" class="unbind">解绑</text><text v-else class="bind">绑定</text><uni-icons type="right" color="#a6a6a6" size="18px" /></view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { register, getUserInfo as getUserInfoApi, notBindNfc } from '@/api/user'
import { onShow } from '@dcloudio/uni-app';
import { ref, computed, reactive } from 'vue';
import { toast } from '@/utils/common'
import store from '@/store/index.js';
const statusBarHeight = computed(() => store.state.systemInfo.statusBarHeight)

const userInfo = ref({
    nfcId: '',
    phone: ''
})

const toggleBindNFC = async () => {
    // 没有NFC 则去绑定
    if (!userInfo.value.nfcId) {
        uni.navigateTo({
            url: '/pages/bindDevice/bindNFC'
        });
        return
    }
    // 解绑
    try {
        const { code } = await notBindNfc({ nfcId: userInfo.value.nfcId })
        if (code === 0) {
            toast({ icon: 'success', title: '解绑成功'}, () => {
                // 刷新用户信息
                getUserInfo()
            })
        }
       
    } catch (e) {

    } finally {
    }
}

const toggleBindPhone = () => {
    // 没有手机号 则去绑定
    if (!userInfo.value.phone) {
        uni.navigateTo({
            url: '/pages/login/phone?type=bind'
        });
        return
    }
    toast({ icon: 'none', title: '暂时不解绑'})
    return
    // 解绑
    uni.navigateTo({
        url: '/pages/bindDevice/togglePhone?type=unbind&phone=' + userInfo.value.phone
    });
}

// 获取用户信息
const getUserInfo = async () => {
    try {
        const { code, data } = await getUserInfoApi({});
        if (code === 0) {
            userInfo.value = data
        }
    } catch (error) {
        console.error('获取用户信息失败', error);
        toast({
            title: '获取用户信息失败',
            icon: 'none'
        });
    } finally {
        uni.hideLoading()
    }
};

const goBack = () => {
    uni.navigateBack()
}

onShow(() => {
    getUserInfo()
})


</script>
<style lang="scss">
.page-setting {

    .top-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px 10px;
        border-bottom: 1px solid #e4e4e499;
        box-sizing: border-box;
        margin-bottom: 15px;
        .cancel {
            font-size: 15px;
            font-weight: 300;
            letter-spacing: 0px;
            line-height: 20px;
            color: rgba(153, 153, 153, 1);
            text-align: left;
            vertical-align: top;
        }

        .title {
            font-size: 17px;
            font-weight: 600;
            letter-spacing: 0px;
            line-height: 22px;
            color: rgba(21, 21, 34, 1);
            text-align: center;
            vertical-align: top;
        }
    }

    .set-list {
        .set-list-li {
            padding: 17px 18px 20px 29px ;
            border-bottom: 1px solid #e4e4e499;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .bind-handle {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 16px;
                line-height: 16px;
            }

            .title {
                font-size: 15px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 20px;
                color: rgba(21, 21, 34, 1);
                text-align: left;
                vertical-align: top;
            }
            .subtitle {
                font-size: 11px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 13px;
                color: rgba(153, 153, 153, 1);
                text-align: left;
                vertical-align: top;
            }

            .unbind,
            .bind {
                margin-right: 10px;
                font-size: 16px;
                font-weight: 400;
                letter-spacing: 0px;
                color: #a6a6a6;
                text-align: center;
            }
            .bind {
                color: rgba(21, 21, 34, 1);
            }
        }
    }
    
}
</style>